<template>
  <div class="refund">
      <div class="header" v-for="(item,index) in list" :key="index">
          <image :src="item.img" alt=""/>
          <div class="header_r">
              <div class="title">{{item.title}}</div>
              <div class="cont">{{item.cont}}</div>
          </div>
      </div>
      <div style="width:100%;height:20rpx;background:#f5f5f5"></div>
      <div class="change_list" v-for="(key,id) in change_list" :key="id" @click="change(id)">
          <div class="list_l">
              <image :src="key.img" alt=""/>
              <div class="info">
                  <div class="info_t">{{key.title}}</div>
                  <div class="info_b">{{key.info}}</div>
              </div>
          </div>
           <image class="list_r" src="/static/images/more.png" alt=""/>
      </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
        list:[{img:'/static/images/img.png',title:'童装女童套装儿童春装2019新款品牌童装小女孩韩版潮衣时髦牛仔运动休',cont:'规格规格'}],
        change_list:[
          {img:'/static/images/jtk.png',title:'仅退款',info:'未收到货（包含未签收），或卖家协商同意前提下'},
          {img:'/static/images/thtk.png',title:'退货退款',info:'已收到货，需要退掉已收到的货物'},
          {img:'/static/images/hh.png',title:'换货',info:'已收到货，需要更换已收到的货'}
        ]
    }
  },
  methods: {
      change(id){
        this.globalData.refundId = id
         wx.navigateTo({ 
            url: '/pages/only_refund/main'
          })
      }
  }
}
</script>

<style scoped lang="less">
    .refund{
      width: 100%;
      .header{
        width: 100%;
        height: 200rpx;
        display: flex;
        padding: 20rpx 30rpx 0 30rpx;
        box-sizing: border-box;
        image{
          width: 150rpx;
          height: 150rpx;
          margin-right: 20rpx;
        }
        .header_r{
          width: 520rpx;
          display: flex;
          flex-direction: column;
          color: #333;
          font-size: 26rpx;
          .title{
            overflow:hidden;
            text-overflow: ellipsis;//显示省略号
            display:-webkit-box;
            -webkit-line-clamp:2;//块元素显示的文本行数
            -webkit-box-orient:vertical;
          }
          .cont{
            margin-top: 8rpx;
            color: #999;
            font-size: 24rpx;
          }
        }
      }
      .change_list{
        width: 100%;
        height: 128rpx;
        padding: 0 28rpx;
        box-sizing: border-box;
        display: flex;
        align-items: center;
        justify-content: space-between;
        color: #333;
        font-size: 26rpx;
        border-bottom: 2rpx solid #ccc;
        .list_l{
          display: flex;
          align-items: center;
          image{
            width: 44rpx;
            height: 40rpx;
            margin-right: 20rpx;
          }
          .info{
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            .info_b{
              color: #999;
              font-size: 22rpx;
              margin-top: 8rpx;
            }
          }
        }
        .list_r{
          width: 14rpx;
          height: 26rpx;
        }
      }
    }
</style>
